
import {computed, defineComponent, onMounted, toRefs, reactive, ref, watch, onBeforeMount, inject, h, nextTick} from 'vue'
import {
    GlobalThemeOverrides,
    NIcon,
    NumberAnimationInst,
    PaginationInfo,
    useLoadingBar,
    useMessage,
    useThemeVars
} from 'naive-ui'
import * as Types from "../../../../../types";
import {CodeOutlined} from "@vicons/antd";
import * as Data from './ImgData'
// @ts-ignore
import elementResizeDetectorMaker from 'element-resize-detector'
import { useStore } from "vuex"

export default defineComponent({
    components: {

    },
    setup () {
        const message = useMessage()
        const loadingBar = useLoadingBar()
        const store = useStore()
        const changeBackground = <Function>inject("changeBackground")
        const state = reactive({
            list: ref<Types.Image[] | null>(null),
            tempId: '0',
            elHeight: 0,
            elWidth: 0,
            // screenWidth: 0,  //屏幕尺寸、
            page: 1,
            pageCount: 0,
            pageSize: 16,
            total: 0,
            nextInfo: ref<PaginationInfo>(),
            loading: false,
            mode: 1,
            numberAnimationInstRef: ref<NumberAnimationInst | null>(null),
            imgTypes: ref<Types.ImageType[] | null>(null),
            checkId: '0',
            erd: elementResizeDetectorMaker(),
            showImageMenuDropdown: false,
            optionImageMenuDropdown: [
                {
                label: '设为壁纸',
                key: 'changeBackgroundImage'
                },
            ],
            showImageMenuDropdownPosition:{
                x: 0,
                y: 0
            },
            back: ref<Types.Image | null>(null)
        })
        const methods = {
            loadImg(id:string){
            },
            handleClick () {
                state.numberAnimationInstRef?.play()
            },
            handleStart () {
                loadingBar.start()
            },
            handleFinish () {
                loadingBar.finish()
            },
            handleError () {
                loadingBar.error()
            },
            getImgs(page: number, size: number = 16, typeId:string = state.checkId) {
                methods.handleStart()
                state.loading = true
                setTimeout(()=>{
                    if (state.checkId !== typeId) {
                        state.checkId = typeId
                        page = 1
                    }
                    let start = size*(page-1)
                    let imgs = []
                    let dataList = typeId === '0' ? Data.hotList : Data.list
                    for (let i in dataList) {
                        if (parseInt(i) >= start && parseInt(i) < size + start) {
                            (<Types.Image[]>dataList)[i].loading = false
                            imgs.push((<Types.Image[]>dataList)[i])
                        }
                    }
                    state.list = imgs
                    state.tempId = Data.list[0].id
                    state.page = page
                    state.pageCount = Math.ceil(dataList.length/size)
                    state.total = Data.list.length
                    state.loading = false
                    methods.handleFinish()
                }, 500)
            },
            getImgType() {
                state.imgTypes = <Types.ImageType[]>Data.type
            },
            handleImageMenu(index: number, e: MouseEvent){
                e.preventDefault()
                state.showImageMenuDropdown = false
                nextTick().then(() => {
                    state.showImageMenuDropdown = true
                    state.showImageMenuDropdownPosition.x = e.clientX
                    state.showImageMenuDropdownPosition.y = e.clientY
                })
                if (state.list) {
                    state.back = <Types.Image>(state.list[index])
                }
            },
            onClickoutside () {
                
            },
            handleSelect(key: string | number | any){
                store.commit(key, state.back?.url)
                changeBackground(state.back?.url)
            }
        }
        watch(
            () => [state.page],
            ([page], [oldPage]) => {
                methods.getImgs(page, state.pageSize)
            }
        )
        onBeforeMount(()=>{
            methods.getImgType()
            let screenWidth = document.body.clientWidth
            if (screenWidth < 1536) {
                state.pageSize = 15
            }
            if (screenWidth < 1200) {
                state.pageSize = 12
            }
            if (screenWidth < 1024) {
                state.pageSize = 10
            }
            if (screenWidth < 700) {
                state.pageSize = 8
            }
            methods.getImgs(state.page, state.pageSize)
        })
        onMounted(() => {
            state.loading = true
            setTimeout(()=>{
                state.erd.listenTo(document.getElementsByClassName("item-img")[0], function(el:HTMLDivElement) {
                    let elWidth: number = (el as HTMLDivElement).offsetWidth
                    state.elWidth = elWidth
                    state.elHeight = elWidth / 1.5
                })
                state.loading = false
            },1000)
        })
        return {
            ...toRefs(state),
            ...methods,
            store,
            imageGroupThemeOverrides: computed(() => {
                const { popoverColor, boxShadow2, textColor2, borderRadius } =
                    useThemeVars().value
                const themeOverrides: NonNullable<GlobalThemeOverrides['Image']> = {
                    toolbarColor: popoverColor,
                    toolbarBoxShadow: boxShadow2,
                    toolbarIconColor: textColor2,
                    toolbarBorderRadius: borderRadius
                }
                return themeOverrides
            })
        }
    },
})
